<template>
  <div class="wrapper">
    <div class="exam">
      <div class="demo-image" @click="toExam(1)">
        <div class="block">
          <el-image
            style="width: 200px; "
            :src="url1"
            fit="contain"></el-image>
          <div class="demonstration">初级考试</div>
        </div>
      </div>
    </div>
    <div class="exam">
      <div class="demo-image" @click="toExam(2)">
        <div class="block">
          <el-image
            style="width: 200px; "
            :src="url2"
            fit="contain"></el-image>
          <div class="demonstration">中级考试</div>
        </div>
      </div>
    </div>
    <div class="exam">
      <div class="demo-image" @click="toExam(3)">
        <div class="block">
          <el-image
            style="width: 200px; "
            :src="url3"
            fit="contain"></el-image>
          <div class="demonstration">高级考试</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['login'],
  name: 'exam',
  data () {
    return {
      url1: 'https://i.loli.net/2019/12/03/sgVJm5NADRi2Sk6.jpg',
      url2: 'https://i.loli.net/2019/12/16/yjuUbgxhTCEH81R.png',
      url3: 'https://i.loli.net/2019/12/16/PRluxAF96hvkgzZ.png'
    }
  },
  methods: {
    toExam (type) {
      let id
      if (type === 1) {
        id = '000001'
      } else if (type === 2) {
        id = '000002'
      } else if (type === 3) {
        id = '000003'
      }
      this.http.get(this.ports.exam.exam + id,
        res => {
          if (res.status === 200) {
            let data = res.data.result
            if (data.code === 200) {
              const loading = this.$loading({
                lock: true,
                text: '正在进入考试',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
              })
              setTimeout(() => {
                loading.close()
                this.$router.push({path: '/examDetail', query: {exam: data.msg, id: id}})
              }, 2000)
            } else if (data.code === -1 || data.code === 1) {
              this.$message.error(data.msg)
            }
          } else if (res.status === 401) {
            this.$emit('toLog', 'true')
          } else {
            console.log(res)
          }
        })
    }
  }
}
</script>

<style lang='scss' scoped>
  @media screen and (min-width: 900px) {
    .wrapper {
      width: 70%;
      margin: 2rem auto;
      display: flex;
      justify-content: space-around;
    }
    .exam {
      width: 33%;
      text-align: center;
      margin-bottom: 1rem;
    }
  }
  @media screen and (max-width: 900px) {
    .wrapper {
      width: 70%;
      margin: 2rem auto;
    }
    .exam {
      width: 100%;
      text-align: center;
      margin-bottom: 1rem;
    }
  }
  .demonstration {
    text-align: center;
    margin-top: 0.3rem;
    color: #585a60;
    font-weight: 800;
  }
  .el-image {
    border-radius: 10px;
    cursor: pointer;
  }
  .el-image :hover {
    border: solid 1px transparent;
  }
</style>
